<template>
    <div>
        姓名:<input type="text" v-model="detail.name"/><br/>
        手机号:<input type="text" v-model="detail.phone"/><br/>
        城市:<input type="text" v-model="detail.city"/><br/>
        详情:<input type="text" v-model="detail.detail"/>
        <button @click="cur">确定</button>
    </div>
</template>

<script>
import {mapMutations,mapState} from 'vuex'
export default {
    data(){
        return {
            detail:{
                name:'',
                phone:'',
                city:'',
                detail:''
            },
            id:-1
        }
    },
    computed:{
        ...mapState(['address'])
    },
    created(){
        this.id = this.$route.query.id;
        if(this.id){
            let obj = this.address.find(item => {
                return item.id == this.id
            });
            let {name,phone,city,detail} = obj;
            this.detail = {
                name,
                phone,
                city,
                detail
            }
        }
    },
    methods:{
        ...mapMutations(['add','edit']),
        //
        cur(){
            //判断是修改还是添加

            if(this.id != -1){
                //修改
                this.edit({...this.detail,id:this.id})
            }else{
                //添加
                this.add(this.detail);
            }
            
            // this.$store.commit('add',this.address);
            this.$router.push('/address');


        }
    }
}
</script>